<template>
	<div class="scene">
		<!-- 场景选择 -->
		<div class="scene-select">
			<span @click="setCurrentGroup('model')" :class="currentIndex == 0 ? 'active' : ''">模型</span>
			<span @click="setCurrentGroup('active')" :class="currentIndex == 1 ? 'active' : ''">交互</span>
			<span @click="setCurrentGroup('blank')" :class="currentIndex == 2 ? 'active' : ''">底板</span>
		</div>

		<!-- 场景 -->
		<div class="scene-wrapper">
			<!-- 模型场景 -->
			<div class="scene-wrapper__model" v-show="currentIndex == 0">
				<div class="table">
					<div class="table-head">
						<span class="table-head__item">物品名称</span>
						<span class="table-head__item">图层</span>
						<span class="table-head__item">
							<i class="iconfont">&#xe60d;</i>
						</span>
					</div>
					<div class="table-body">
						<div
							class="table-body__item"
							:class="index === modelIndex ? 'active' : ''"
							v-for="(item, index) in tabledata_model"
							:key="index"
							@click="toggleModel(index)"
						>
							<span>
								<i class="iconfont">&#xe712;</i>
								{{ item.Data.DisplayName }}
							</span>
							<span>default</span>
							<span>
								<i v-if="item.Data.ActorVis" class="iconfont">&#xe60d;</i>
								<i v-else class="iconfont">&#xe6cf;</i>
							</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 交互场景 -->
			<div class="scene-wrapper__action" v-show="currentIndex == 1">
				<div class="table">
					<div class="table-body">
						<div
							class="table-body__item"
							:class="index === actionIndex ? 'active' : ''"
							v-for="(item, index) in tabledata_action"
							:key="index"
							@click="toggleAction(index)"
						>
							<span>
								<i class="el-icon-location" style="font-size: 16px"></i>
								<span class="overpoint">{{ item.Data.DisplayName }}</span>
							</span>
							<span style="width: 0"></span>
							<span>
								<i v-if="item.Data.ActorVis" class="iconfont">&#xe60d;</i>
								<i v-else class="iconfont">&#xe6cf;</i>
							</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 底板场景 -->
			<div class="scene-wrapper__model" v-show="currentIndex == 2"></div>
		</div>

		<!-- 刷新场景 -->
		<div class="scene-refresh" v-show="showRefresh && currentIndex == 0">
			<el-popover placement="top-start" content="刷新模型列表" popper-class="topPopver" trigger="hover">
				<span slot="reference">
					<i class="el-icon-refresh"></i>
				</span>
			</el-popover>
		</div>
	</div>
</template>
 
<script>
import { mapGetters, mapMutations } from 'vuex';

export default {
	name: 'Scene',
	props: {
		openBottom: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		...mapGetters('ue4Info', {
			currentData: 'queryCurrentActorData',
			currentGroup: 'queryCurrentActorGroup',
			modelData: 'queryModelGroupData',
			activeData: 'queryActiveGroupData'
		})
	},
	watch: {
		openBottom(val) {
			// 优化动画效果
			setTimeout(() => {
				this.showRefresh = val;
			}, 50);
		},

		modelData(val) {
			this.tabledata_model = val;
		},

		activeData(val) {
			this.tabledata_action = val;
		},

		currentGroup(val) {
			if (val === 'model') {
				this.currentIndex = 0;
			} else if (val === 'active') {
				this.currentIndex = 1;
			} else {
				this.currentIndex = 2;
			}
		},

		currentData: {
			handler: function (val) {
				if (val) {
					if (this.currentGroup === 'active') {
						this.tabledata_action.map((item, index) => {
							if (item.Data.NameInLevel === val.NameInLevel) {
								this.actionIndex = index;
								this.setActiveIndex(index);
							}
						});
					} else {
						this.tabledata_model.map((item, index) => {
							if (item.Data.NameInLevel === val.NameInLevel) {
								this.modelIndex = index;
								this.setModelIndex(index);
							}
						});
					}
				} else {
					this.modelIndex = '';
					this.actionIndex = '';
				}
			},
			deep: true
		}
	},
	data() {
		return {
			showRefresh: true /* 是否展示刷新图标 */,
			currentIndex: 0 /* select选中索引 */,
			modelIndex: '' /* 模型选中索引 */,
			actionIndex: '' /* 交互选中索引 */,
			tabledata_model: [] /* 模型数据 */,
			tabledata_action: [] /* 交互数据 */
		};
	},
	created() {
		this.init();
	},
	methods: {
		...mapMutations('ue4Info', {
			setCurrentGroup: 'setCurrentActorGroup',
			setCurrentActor: 'setCurrentActor',
			setModelIndex: 'setModelGroupIndex',
			setActiveIndex: 'setActiveGroupIndex'
		}),

		// 初始化
		init() {},

		// 切换交互索引
		toggleAction(index) {
			$ue4.moveToActor(this.tabledata_action[index].Data.NameInLevel);
		},

		// 切换交互索引
		toggleModel(index) {
			$ue4.moveToActor(this.tabledata_model[index].Data.NameInLevel);
		}
	}
};
</script>
 
<style lang="scss">
.scene {
	font-size: 14px;
	position: relative;
	padding: 12px 0;
	height: 100%;

	.scene-select {
		display: flex;
		border-radius: 1px;
		overflow: hidden;
		padding: 0 12px 10px 12px;

		span {
			flex: 1;
			padding: 2px 0;
			@include xy-dfc;
			@include xy-stopselect;
			cursor: pointer;
			color: $--xy-color-light;
			font-size: 12px;
			background-color: #2e2f33;

			&:hover {
				color: #fff;
			}
		}

		span.active {
			background-color: #2c68f6;
			color: #fff;
		}
	}

	.scene-wrapper {
		height: calc(100% - 35px);

		& > div {
			height: calc(100% - 10px);
		}

		.table {
			@include xy-stopselect;
			color: $--xy-color-light;
			font-size: 12px;
			height: 100%;

			.table-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 5px 0 5px 0;
				padding: 0 12px;

				&__item:nth-child(1) {
					flex: 1;
					padding-right: 10px;
				}

				&__item:nth-child(2) {
					width: 80px;
				}

				&__item:nth-child(3) {
					width: 25px;

					i {
						font-size: 15px;
						font-weight: bold;
					}
				}
			}

			.table-body {
				height: calc(100% - 25px);
				@include xy-scroll;
				overflow-y: auto;

				&__item {
					height: 32px;
					display: flex;
					padding: 0 12px;
					align-items: center;
					cursor: pointer;

					&:hover {
						color: #fff;
					}

					& > span:nth-child(1) {
						max-width: 140px;
						padding-right: 10px;
						flex: 1;
						@include xy-overpoint;

						i {
							margin-right: 5px;
						}
					}

					& > span:nth-child(2) {
						@include xy-overpoint;
						width: 80px;
					}

					& > span:nth-child(3) {
						width: 25px;
						text-align: center;
					}
				}

				&__item.active {
					background-color: #2c68f6;
					color: #fff;
				}
			}
		}
	}

	.scene-refresh {
		position: absolute;
		left: 10px;
		bottom: 5px;
		font-size: 20px;
		color: $--xy-color-light;
		cursor: pointer;
		font-weight: bold;

		&:hover {
			color: #ccc;
		}
	}
}
</style>